<template>
  <div class="map" :id="mainMapId" :style="{ 'height': height }" ref="map">
     <search-input v-if="showSearchInput" @item-select="itemSelect"></search-input>
     <map-tool v-if="showMapTool"/>
     <slot></slot> 
  </div> 
</template>
<script>
import Store from './store';
import { MapLoader, AMapUILoader } from '@/utils/common';
import MapTool from './map-tool';
import SearchInput from './search';
export default {
  name: 'MainMap',
  props: {
    options: {
      type: Object,
      default: () => {
        return {

        };
      }
    },
    height: {
      type: Number | String,
      default: '400px'
    },
    showSearchInput: {
      type: Boolean,
      default: true
    },
    mainMapId: {
      type: String,
      default: 'mainMap'
    },
    showMapTool: {
      type: Boolean,
      default: true
    }
  },
  components: {
    MapTool, SearchInput
  },
  provide() {
    return {
      rootStore: this
    };
  },
  data() {
    return {
      store: null

    };
  },
  created() {
    this.store = new Store({ vm: this });
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    mapStyle() {
      if (this.layoutSkin === 'dark') {
        return 'amap://styles/28f74d4c915a7cf5238da4b9ea7bfb4d';
      } else {
        return 'amap://styles/080189ba119578512d688b3a144ba183'; // 'amap://styles/498f1c74cdc0b2b6dacd573aabff5972'
      }
    }
  },
  watch: {
    layoutSkin(n) {
      console.log(n);
      this.store.map.setMapStyle(this.mapStyle);
    }
  },
  methods: {
    itemSelect(item) {
      this.$emit('item-select', item);
    }
  },
  mounted() {
    const key = '7239edcce35ce00f86c944ad5afb48d4';// '89401cacb8a7709f4339f733e5ee8740';
    MapLoader(key).then(AMap => {
      AMapUILoader().then(AMapUI => {
        this.store.AMap = AMap;
        this.store.defaultLayer = new AMap.TileLayer({ zIndex: 50 });
        this.store.roadNetLayer = new AMap.TileLayer.RoadNet();
        this.store.satelliteLayer = new AMap.TileLayer.Satellite();
        const div = this.$refs.map;
        this.store.map = new AMap.Map(div, {
          resizeEnable: true,
          mapStyle: this.mapStyle // 'amap://styles/light' // 设置地图的显示样式
        });
        this.store.map.on('complete', _ => {
          this.$emit('map-loaded', this.store.map, AMap, AMapUI);
        });
      });
    });
  }
};
</script>
<style lang="scss">
// 测距icon
.amap-ranging-label{
  img{
    width: 7px;
    height: 7px;
  }
  .delimg{
    width: 14px;
    height: 14px;
  }
}
</style>
<style lang="scss" scoped>
.map{
  width:100%;
  height: 100%;

}
</style>